<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no"> 
 <title>Happy Birthday</title>
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <link rel="stylesheet" href="css/memories.css">
    <style>
        p{
            margin: 6px 0;
            word-wrap:break-word;
            word-break:normal;
        }
    </style>
</head>

<body>
  <!-- 背景音乐 -->
  <div style="display:none">
    <!-- 网易云外链 -->
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=480353&auto=1&height=66"></iframe>
  </div>
<div class="bgcolor">
  <div style="z-index:100;" id="dowebok">
      <!--第一屏-->
      <div class="section">
          <div class="ly-box01">
            <div class="ly-txt01" style="word-break:break-all;word-wrap:break-word">
                <nobr><p class="ly-stxt01">我们相识了<span id="day1"></span>天</p></nobr>
                <nobr><p class="ly-stxt02">我们在一起了<span id="day2"></span>天</p></nobr>
                <nobr><p class="ly-stxt03">我们一起走过了<span id="day3"></span>年</p></nobr>
                <nobr><p class="ly-stxt04">这是我们在一起度过的第<span id="day4"></span>个生日</p></nobr>
                <nobr><p class="ly-stxt05">距离傻妞儿下个生日还有 <span id="day5"></span>天</p></nobr>
            </div>
            <div class="ly-txt02">
                <nobr><p class="ly-stxt06">幸福的时刻，一半是同你在一起，一半是在梦里</p></nobr>
                <nobr><p class="ly-stxt07">痛苦的时刻，一半是分离，一半是默默的想你</p></nobr>
                    <nobr><p class="ly-stxt08">整个世界，我最爱的地方，就是你的左右</p></nobr>
                        <nobr><p class="ly-stxt09">我不贪心，只有一个小小的愿望：</p></nobr>
                            <nobr><p class="ly-stxt09">未来有你，生命中永远有你</p></nobr>
                                <nobr><p class="ly-stxt10">下一个生日，我还在！！！</p></nobr>
            </div>
        </div>
      </div>

      <!--第二屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box11">
              <div class="ly-txt11">
                  2018-04-11
              </div>
              <div class="ly-txt12">
                  这一天，终于在茫茫人海中与你相遇
              </div>
              <div class="ly-imgbox11">
                <img class="ly-img11" src="img/1.jpg" style="zoom: 25%">
              </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box12">
              <div class="ly-txt13">
                  2020-10-01
              </div>
              <div class="ly-txt14">
                 <p>傻妞</p>
			     <p>这一天，终于牵住了你</p>
			     <p>你就像上天送给我的礼物，</p>
			     <p>温柔 漂亮 开朗 大方</p>
			     <p>两年的时间，兜兜转转</p>
			     <p>你终究还是属于我</p>
				 <p>于是，我决定，无论发生什么</p>
				 <p>我都不会再放开你的手</p>
				 <p>这一牵，就是一辈子</p>
              </div>
          </div>
          <div class="ly-triangle12"></div>
      </div>

      <!--第三屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box21">
              <div class="ly-txt21">
                  2020-10-04
              </div>
              <div class="ly-txt22">
                 <p> 这一天，是我们第一次相遇的别离，</p>
                 <p> 但是是为了我们更好的相遇；</p>
                 <p> 这一天，重庆的天飘着连绵细雨，</p>
                 <p> 可我心里，却满是阳光......</p>
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/2.jpg">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
              <div class="ly-txt23">
                  2020-12-20
              </div>
              <div class="ly-txt24">
                  <p> 这一天，是我第二次去你的城市，</p>
                  <p> 重庆真的好美，这里有我爱的人，也有爱我的人，</p>
                  <p> 以后，这里不只是你的家，也是我的了......</p>
              </div>
              <div class="ly-imgbox22">
                <img class="ly-img22" src="img/3.jpg" style="height: 80% ;width: 100%; object-fit: cover">
              </div>
          </div>
          <div class="ly-triangle22"></div>

           <div class="ly-box23">
              <div class="ly-txt25">
                  2020-12-21
              </div>
              <div class="ly-txt26">
                  <p> 从这天开始，我们有了很多的第一次...</p>
              </div>
              <div class="ly-imgbox23">
                <img class="ly-img23" src="img/4.jpg" style="zoom: 25%">
              </div>
          </div>
          <div class="ly-triangle23"></div>
      </div>

      <!--第四屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint31"></div>
          <div class="ly-box31">
              <div class="ly-txt31">
                  总有一天......
              </div>
              <div class="ly-txt32">
                  <p>我会捧着鲜花，带着父母，让叔叔亲手把你交到我的身边</p>
              </div>
              <div class="ly-imgbox31">
                <img class="ly-img31" src="img/7.jpg" style="height: 100% ;width: 90%; object-fit: cover">
              </div>
          </div>
          <div class="ly-triangle31"></div>

<!--          <div class="ly-box32">-->
<!--              <div class="ly-txt33">-->
<!--                  201X-1X-2X-->
<!--              </div>-->
<!--              <div class="ly-txt34">-->
<!--                 <p>XXXXXXXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox31">-->
<!--                <img class="ly-img31" src="img/1.png">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle32"></div>-->
      </div>

<!--  &lt;!&ndash;第五屏&ndash;&gt;-->
<!--  <div class="section">-->
<!--          <div class="timeline"></div>-->
<!--          <div class="timepoint21"></div>-->
<!--          <div class="ly-box52">-->
<!--              <div class="ly-txt21">-->
<!--                  2015-01-01-->
<!--              </div>-->
<!--              <div class="ly-txt22">-->
<!--                 <p>XXXXXXXXXXXXXX</p>-->
<!--				         <p>XXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox21">-->
<!--                <img class="ly-img21" src="img/1.jpg">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle21"></div>-->

<!--          <div class="ly-box22">-->
<!--              <div class="ly-txt23">-->
<!--                  201X-0X-1X-->
<!--              </div>-->
<!--              <div class="ly-txt51">-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--				          <p>XXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox22">-->
<!--                <img class="ly-img22" src="img/1.png">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle22"></div>-->

<!--           <div class="ly-box51">-->
<!--              <div class="ly-txt25">-->
<!--                  201X-0X-1X-->
<!--              </div>-->
<!--              <div class="ly-txt26">-->
<!--                  <p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox23">-->
<!--                <img class="ly-img23" src="img/1.jpg">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle23"></div>-->
<!--      </div>-->

<!--  &lt;!&ndash;第六屏&ndash;&gt;-->
<!--  <div class="section">-->
<!--          <div class="timeline"></div>-->
<!--          <div class="timepoint21"></div>-->
<!--          <div class="ly-box21">-->
<!--              <div class="ly-txt21">-->
<!--                  201X-0X-1X-->
<!--              </div>-->
<!--              <div class="ly-txt22">-->
<!--                 <p>XXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox21">-->
<!--                <img class="ly-img21" src="img/1.png">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle21"></div>-->

<!--          <div class="ly-box22">-->
<!--              <div class="ly-txt23">-->
<!--                  201X-0X-2X-->
<!--              </div>-->
<!--              <div class="ly-txt24">-->
<!--                  <p>XXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox22">-->
<!--                <img class="ly-img22" src="img/1.png">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle22"></div>-->

<!--           <div class="ly-box23">-->
<!--              <div class="ly-txt25">-->
<!--                  201X-0X-2X-->
<!--              </div>-->
<!--              <div class="ly-txt61">-->
<!--                  <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--                  <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--                  <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--                  <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--                  <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXX</p>-->
<!--				          <p class="wwww1" style="display:none;">你想要的，我能给的，我都会给你。</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox61">-->
<!--                <img class="ly-img61" src="img/1.jpg">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle23"></div>-->
<!--      </div>-->

<!--      &lt;!&ndash;第七屏&ndash;&gt;-->
<!--      <div class="section">-->
<!--          <div class="timeline"></div>-->
<!--          <div class="timepoint71"></div>-->
<!--          <div class="ly-box21 xx71">-->
<!--              <div class="ly-txt21">-->
<!--                  201X-0X-3X-->
<!--              </div>-->
<!--              <div class="ly-txt22">-->
<!--                 <p>XXXXXXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXXXXXX</p>-->
<!--                 <p>XXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox21">-->
<!--                <img class="ly-img21" src="img/1.png">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle21 xx72"></div>-->

<!--          <div class="ly-box71">-->
<!--              <div class="ly-txt23">-->
<!--                  201X-0X-0X-->
<!--              </div>-->
<!--              <div class="ly-txt71">-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox71">-->
<!--                <img class="ly-img71" src="img/1.jpg">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle22"></div>-->

<!--           <div class="ly-box72">-->
<!--              <div class="ly-txt25">-->
<!--                  201X-0X-1X-->
<!--              </div>-->
<!--              <div class="ly-txt72">-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox72">-->
<!--                <img class="ly-img72" src="img/1.jpg">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle71"></div>-->

<!--          <div class="ly-box73">-->
<!--              <div class="ly-txt25">-->
<!--                  201X-0X-1X-->
<!--              </div>-->
<!--              <div class="ly-txt73">-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox73">-->
<!--                <img class="ly-img73" src="img/1.jpg">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle72"></div>-->
<!--      </div>-->

<!--      &lt;!&ndash;第八屏&ndash;&gt;-->

<!--      <div class="section">-->
<!--          <div class="timeline"></div>-->
<!--          <div class="timepoint11"></div>-->
<!--          <div class="ly-box81">-->
<!--              <div class="ly-txt11">-->
<!--                  201X-0X-1X-->
<!--              </div>-->
<!--              <div class="ly-txt82">-->
<!--                  <p>XXXXXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXXXXX</p>-->
<!--                  <p>XXXXXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--              <div class="ly-imgbox81">-->
<!--                <img class="ly-img81" src="img/1.png">-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle11"></div>-->

<!--          <div class="ly-box82">-->
<!--              <div class="ly-txt13">-->
<!--                  2015-06-18-->
<!--              </div>-->
<!--              <div class="ly-txt84">-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--                 <p class="wwww1">XXXXXXXXXXXXXXXXXX</p>-->
<!--              </div>-->
<!--          </div>-->
<!--          <div class="ly-triangle82"></div>-->
<!--      </div>-->

      <!--第九屏-->

<div class="section">
          <div class="timeline"></div>
          <div class="timepoint91"></div>
          <div class="ly-box21 xx91">
              <div class="ly-txt21">
                  第一次...
              </div>
              <div class="ly-txt90">
                 <p>不得不说这包子味道还行......</p>
              </div>
              <div class="ly-imgbox21 xx94">
                <img class="ly-img21" src="img/5.jpg" style="zoom: 25%">
              </div>
          </div>
          <div class="ly-triangle21 xx92"></div>

          <div class="ly-box91">
              <div class="ly-txt23">
                  第一次...
              </div>
              <div class="ly-txt91">
                  <p>原来冬天吃冰淇淋也是一种幸福......</p>
              </div>
              <div class="ly-imgbox91">
                <img class="ly-img91" src="img/6.jpg" style="height: 100% ;width: 100%; object-fit: cover">
              </div>
          </div>
          <div class="ly-triangle22 xx92"></div>

           <div class="ly-box92">
              <div class="ly-txt25">
                  第一次...
              </div>
              <div class="ly-txt92">
                  <p>爬长城的女汉子和他的娇小男朋友......</p>
              </div>
              <div class="ly-imgbox92">
                <img class="ly-img92" src="img/8.jpg" style="zoom: 25%">
              </div>
          </div>
          <div class="ly-triangle91"></div>

          <div class="ly-box93">
              <div class="ly-txt25">
                  第一次...
              </div>
              <div class="ly-txt93">
                  <p>看影子是不是就看不出来胖了......</p>
              </div>
              <div class="ly-imgbox93">
                <img class="ly-img93" src="img/9.jpg" style="zoom: 25%">
              </div>
          </div>
          <div class="ly-triangle92"></div>
      </div>
		<!--第十屏-->

		      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box81">
              <div class="ly-txt11">
                  2022-02-14
              </div>
              <div class="ly-txt82" style="top:8%">
                  <p class="wwww1">今天是你的生日，</p>
                  <p class="wwww1">所以这张照片等你来补</p>
                  <p class="wwww1">反正今天是看不到了(●'◡'●)</p>
              </div>
              <div class="ly-imgbox81">
                <img class="ly-img81" src="img/10.png"  style="zoom: 25%">
              </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box82">
              <div class="ly-txt13">
                  2022-02-14 至 以后
              </div>
              <div class="ly-txt84">
                 <p>是不是好久没看见我的长篇大论了，怀不怀念😜 </p>
                 <p>之前给你写在纸上，总会不小心搞丢的，所以今年想了个这么个办法，我要开始了哈...</p>
                 <p>陈炳炳，生日快乐！ Happy Birthday TO You</p>
                 <p>完了........................................</p>
                 <p><br></p>
                 <p><br></p>
                  <p>哈哈，怎么可能。宝宝，虽然过了今天你又成长了一岁，但我只希望你永远做我的宝宝，我不能保证不惹你生气， 但我能保证只偏爱于你。</p>
                  <p>在我这里，你永远都是那个可以放肆做自己的小姑娘，你可以和我分享快乐，也可以和我抱怨委屈，我都认真听着，并且我永远站在你身边.</p>
                  <p>我真的很开心你能陪我，我能想到这世上温暖幸福的事，大概就是你我依偎在一起，互相关心，互相体谅，互相陪伴</p>
                  <p>我喜欢和你在一起的每分每秒，我喜欢你的眼睛，喜欢你的笑容，喜欢关于你的一切一切，喜欢你成了我唯一的习惯。</p>
                  <p>对我来说幸福就是和你一起干饭回家睡懒觉，见面手牵手散步分享生活的琐事。你不放下我，我不放开你，总之就是要和你一起,每天都这样是件多么幸福的事~</p>
                  <p>这次是真没了，嘻嘻~~</p>
                  <p>傻妞，生日快乐！记得每天开心哦！</p>
              </div>
          </div>
          <div class="ly-triangle82"></div>
      </div>

       </div>
  <!--动态方块-->
  <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>
  <!-- <audio muted src="music/1.mp3" autoplay="autoplay" loop="loop"></audio> -->

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- <script src="js/auto-play.js"></script> -->
<script src="js/memories.js"></script>
  <!-- 这是我们纪念日的天数 -->
<script>
    var date = new Date()
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    var  endDay = Date.parse(y+'-'+m+'-'+d);

    var  startDate1 = Date.parse('2018-04-11');
    var  startDate2 = Date.parse('2020-10-01');
    var  startDate3 = Date.parse('2020-10-01');
    var  startDate4 = Date.parse('2020-02-14');
    var  startDate5 = Date.parse('2023-02-04');

    var day1 = (endDay - startDate1) / ( 1 * 24 * 60 * 60 * 1000 );
    day1 = day1.toFixed(2)
    document.getElementById('day1').innerText = day1;

    var day2 = (endDay - startDate2) / ( 1 * 24 * 60 * 60 * 1000 );
    day2 = day2.toFixed(2)
    document.getElementById('day2').innerText = day2;

    var day3 = (endDay - startDate3) / ( 1 * 24 * 60 * 60 * 1000 * 365 );
    day3 = day3.toFixed(2)
    document.getElementById('day3').innerText = day3;

    var day4 = (endDay - startDate4) / ( 1 * 24 * 60 * 60 * 1000 * 365 );
    day4 = day4.toFixed(0)
    document.getElementById('day4').innerText = day4;

    var day5 = ( startDate5 - endDay ) / ( 1 * 24 * 60 * 60 * 1000 );
    day5 = day5.toFixed(2)
    document.getElementById('day5').innerText = day5;


</script>
</body>
</html>
